<template>
  <el-dialog
    @open="handleOpen"
    @closed="handleClose(false)"
    :visible.sync="showDialog"
    :lock-scroll="false"
    close-on-press-escape
    v-dialogDrag
    title="编辑设备类型"
    :close-on-click-modal="false"
  >
    <el-tabs :tab-position="tabPosition" class="tabHight">
      <el-tab-pane label="详情">
        <el-form
          :model="editDeviceForm"
          :rules="deviceRules"
          ref="editDeviceForm"
          size="mini"
          label-width="auto"
          class="tabHight_auto"
        >
          <el-form-item label="Token:" prop="token">
            <el-input
              disabled
              v-model="editDeviceForm.token"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="名称:" prop="name">
            <el-input
              v-model="editDeviceForm.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="描述" prop="description">
            <el-input
              type="textarea"
              v-model="editDeviceForm.description"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>

          <el-form-item label="容器策略" prop="containerPolicy">
            <el-radio-group v-model="editDeviceForm.containerPolicy">
              <el-radio label="Standalone">设备</el-radio>
              <el-radio label="Composite">设备组</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="图像:" prop="imageUrl">
            <div style="width: 100%">
              <el-row>
                <el-col :span="6">
                  <app-upload
                    tips=""
                    :is-resolution="true"
                    :width="720"
                    :height="294"
                    @subUploadSucceed="handleUploadSucceed"
                  />
                </el-col>
                <el-col :span="18">
                  <div class="imageHome" v-if="showImg">
                    <img
                      v-if="editDeviceForm.imageUrl"
                      :src="editDeviceForm.imageUrl | filtersFileUrl()"
                      class="image-size"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="元数据">
        <metaData
          :editmetaData="editmetaData"
          :isedit="isedit"
          @sendmetaDatas="sendmetaData"
        />
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="showDialog = false">取 消</el-button>
      <el-button
        v-permission="[3, 'button']"
        size="mini"
        type="primary"
        :loading="btnLoading"
        @click="submitForm('editDeviceForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import MetaData from "../../opensite/metaData.vue";
import AppUpload from "../devicegroups/UploadImage.vue";
import { TOKEN_RULES } from "@/utils/local";
import { updateDeviceTypes, getDeviceDetails } from "@/api/deviceType";

export default {
  props: {
    deviceTypeToken: {
      type: String,
    },
    editdevicetype: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    MetaData,
    AppUpload,
  },
  data() {
    return {
      btnLoading: false,
      tabPosition: "left",
      showDialog: false,
      // token: this.deviceTypeToken,
      editDeviceForm: {
        token: "",
        name: "",
        description: "",
        containerPolicy: "",
        imageUrl: "",
      },
      isedit: true,
      metaDataJson: {},
      editmetaData: {},
      deviceRules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 0,
            max: 15,
            message: "长度在 0 到 15 个字符",
            trigger: "blur",
          },
        ],
        token: TOKEN_RULES,
        containerPolicy: [
          { required: true, message: "请选择容器策略", trigger: "change" },
        ],
        imageUrl: [
          { required: true, message: "请上传图像", trigger: "change" },
        ],
      },
    };
  },
  mounted() {},
  computed: {
    showImg: function () {
      return this.editDeviceForm.imageUrl != "";
    },
  },
  watch: {
    editdevicetype(oldVal, newVal) {
      this.showDialog = this.editdevicetype;
    },
  },
  methods: {
    // 关闭
    handleClose(isRefresh) {
      var param = {
        isRefresh: isRefresh,
        deviceTypeToken: this.editDeviceForm.token,
      };
      this.$emit("changeShow", param);
    },

    // 详情信息
    deviceTypesByToken() {
      var that = this;
      var param = { includeAsset: false };

      getDeviceDetails(param, this.deviceTypeToken).then((res) => {
        that.editDeviceForm = Object.assign({}, res.data);
        that.editmetaData = that.editDeviceForm.metadata;
      });
    },

    // 修改提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.editDeviceForm);
          formData.metadata = this.metaDataJson;
          this.btnLoading = true;
          updateDeviceTypes(formData, this.deviceTypeToken)
            .then((res) => {
              const { data } = res;
              this.$emit("changeEditDevType", this.editDeviceForm.token);
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.showDialog = false;
              this.handleClose(true);
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleOpen() {
      this.deviceTypesByToken();
    },

    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },

    handleUploadSucceed(url) {
      this.editDeviceForm.imageUrl = url;
    },
  },
};
</script>

<style lang='scss' scoped>
.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;
  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}
</style>